dom tree
首先先了解什麼是DOM
網頁瀏覽器在解析的時候
他會把這個東西變成dom tree 節點樹狀圖
可以看到他就是由document去分支
會有很多個Element元素 也會在分支有Attribute屬性等
那這些就可以幫助你抓出這些元素用JS動態去更改他們
像是可以更改a連結的網址、更改h1標題等等
當你已解DOM之後才可以真正進入到網頁來去做互動
大家可以試試看在瀏覽器右鍵選擇檢查
找到主控台 輸出 document 就可以看到回傳到整個文件的文本
他幫你把所有的內容都解析出來
好處就是你可以從DOM的地方很好的選取出你要的內容
DOM環境建置
那接下來教的是怎麼開始用DOM這個方式
首先之前都會教把<script src"all.js"></script>放在head
那現在要把他剪下 貼在</body>的前一行(所有內容之後)
那為什麼開始講到DOM之後這個東西要放在後面
原因是網頁今天解析是從頭讀取到尾
如果今天還沒執行到body的內容去讀取有哪些元素(ex:h1、a)
那在head執行的all.js檔就會讀取不到
所以放後面的目的就是要先讓body的內容都產生結點後
再執行all.js才能來抓取到這些節點
querySelector 選擇器
接下來就要教如何透過DOM來選取到網頁的元素
document.querySelector('css選擇器')
``
//選取 h1
//宣告一個const的變數el 選取網頁上元素 'css選擇器'
const el = document.querySelector('h1');
//選取class .header
const el = document.querySelector('.header');
``
textContent 寫入文字資料
先宣告變數選取元素 在賦予字串在元素
.textContent 修改文字節點 更改文字內容
//較好的做法
//宣告一個const的變數el 選取網頁上元素 'css選擇器'
const el = document.querySelector('h1');
//再從變數去賦予字串
el.textContent = "hello World!!"
//第二個做法直接改
document.querySelector('.header').textContent = "hello World!"
為什麼第一種做法會比較好 因為宣告完變數後
就可以做很多變化和修改
不需要每次都多寫document.querySelector這行
innerHTML 插入 HTML 標籤
.innerHTML 將原始內容清空 插入新的內容
//在main class div新增一個h1和內容
const main =document.querySelector('.main')
//可以新增一串自己組出來的資料
main.innerHTML=`<h1 class="header">我是一段標題</h1>`
//！！！但這邊特別注意 innerHTML是將原始class裡面的資料全部清空
再加入新寫的資料 因此HTML裡面原始資料都會被清空
innerHTML 加入變數
那innerHTML裡面也可以加入變數
來讓資料日後要修改更方便
const list = document.querySelector(".list")
let myLink = "https://www.yahoo.com.tw";
let meName = "yahooooo";
let content = `<li><a herf="${myLink}>${myName}連結</a></li>`
list.innerHTML = content+content;
會需要學會這些用法是因為
以後可能會用到很多陣列、物件的資料
就需要在這裡將每筆資料組出想要的結構
再去呈現到html上面
textContent 與 innerHTML 運用差異
可以看到這張圖
圈起來的是元素
如果說今天你想改的是整個元素
那就是使用innerHTML
那在看到框起來的是他裡面的內容
如果只是要改內容 就是使用textContent
主要差別在這邊
main.innerHTML = `<h1>標題</h1>;` //會新增一個h1的結構放進去
main.textContent = `<h1>標題</h1>;` //會把整段以純文字形式呈現
setAttribute 增加 HTML 標籤屬性
如果想要改變a連結的屬性
const myLink = document.querySelector("a");
//可以讓herf=後面的內容新增這串連結
myLink.setAttribute("herf","https://www.yahoo.com.tw");
//可以新增class="red" (但是class style的內容還是要預先設定過)
myLink.setAttribute("class","red");
querySelectorAll 可重複選取多個元素
前面學到querySelector可以選擇元素的部分
但如果同時有兩個相同名稱的元素
querySelector也只會選取到最前面的那個元素
這時候就需要用到querySelectorAll
const myLink = document.querySelectorAll("a");
console.log(myLink); //這時候會回傳給你節點列表
//列出所有選取到的節點 以陣列呈現
//由於他是以陣列的方式存取 因此myLink[0]就可以選出要選取哪一個
myLink[0].setAttribute("herf","https://www.yahoo.com.tw");
//myLink[1]就會選到節點陣列的第二筆資料
myLink[1].setAttribute("herf","https://www.google.com.tw");
那等到未來教到forEach for迴圈 就不會這樣需要打那麼多行
目前只是先讓各位知道有這個方式
.innerHTML、.textContent、.getAttribute 取值方法
.innerHTML抓整段結構
.textContent抓結構內的文字內容
.getAttribute抓結構內的元素值
html內容
<a href="www.yahoo.com.tw" class="red"><span>連結</span></a>
js取值的方法
//.innerHTML、.textContent、.getAttribute 取值方法
const myLink = document.querySelector("a"); //選取到a標籤
console.log(myLink.getAttribute("href")); //取出他的href值
console.log(myLink.getAttribute("class")); //取出他的class值
console.log(myLink.innerHTML); //取出整段結構
console.log(myLink.textContent); //取出結構內的文字內容
如果是表單元素
input裡的資料 如value可以用.value來取
html內容
<input type="text" class="txt" value="您好嗎?">
<select class="list">
<option value="高雄市">高雄市</option>
<option value="台北市">台北市</option>
</select>
js取值或改動的方法
const txt = document.querySelector(".txt"); //先將txt選取到該class
console.log(txt.value); //會印出value的值 您好嗎?
txt.value = 123; //將value從您好嗎? 改成 123
const list = document.querySelector(".list");
list.value = "台北市"; //重新賦予值台北市
